<template>
  <u-swipe-action>
    <u-swipe-action-item :options="options1">
      <view class="house-item">
        <view class="title">
          <view class="left">北京富力家园</view>
          <view class="right">
            <view class="success">审核通过</view>
            <!-- <view class="waiting">
							审核中
						</view>
						<view class="error">
							审核通过
						</view> -->
          </view>
        </view>
        <view class="content">
          <view class="number">
            <text>房间号</text>
            <text>1号楼1单元101室</text>
          </view>
          <view class="name">
            <text>业主</text>
            <text>张三</text>
          </view>
        </view>
      </view>
    </u-swipe-action-item>
  </u-swipe-action>
</template>

<script>
export default {
  name: 'house-item',
  data() {
    return {
      options1: [
        {
          text: '删除',
          style: {
            backgroundColor: '#CC655E'
            // borderRadius: "0 16rpx 16rpx 0",
            // width: "120rpx",
            // height: "249rpx"
          }
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.house-item {
  width: 100%;
  height: 249rpx;
  border-radius: 16rpx;
  background: #ffffff;
  // margin-bottom: 20rpx;

  .title {
    height: 96rpx;
    border-bottom: 1rpx solid #f2f2f6;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 30rpx;
      color: #333;
    }

    .right {
      .success {
        width: 128rpx;
        height: 48rpx;
        color: #27ae60;
        border-radius: 10rpx;
        background: #ebf8f0;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
      }

      .waiting {
        width: 104rpx;
        height: 48rpx;
        border-radius: 10rpx;
        background: #e5f0fb;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #2d9cdb;
      }

      .error {
        width: 128rpx;
        height: 48rpx;
        color: #eb5757;
        border-radius: 10rpx;
        background: #fcf2ed;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
      }
    }
  }

  .content {
    height: 152rpx;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    view {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;

      text:nth-child(1) {
        color: #c3c3c5;
      }

      text:nth-child(2) {
        color: #686868;
      }
    }
  }
}
</style>
